<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>参保人数统计</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>

    <style>
        td{
            padding: 26px 2px;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 查询表单 -->
    <el-form
            :inline="true"
            size="small"
            :model="formData"
            class="demo-form-inline"
    >
        <el-form-item label="所属期" >
            <el-date-picker
                    type="month"
                    placeholder="选择年月"
                    v-model="formData.month"
                    style="width: 100%"
                    value-format="yyyy-MM"
            ></el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="toQuery">查询</el-button>
            <el-button type="primary" plain @click="printHtml">报表打印</el-button>

            <el-button type="primary" plain @click="statmonth">统计</el-button>
            <el-button type="primary" plain @click="statall">统计全部数据</el-button>

        </el-form-item>
    </el-form>

    <!-- 每页数据数量一定，最后一页需要显示合计 -->
    <div id="printListRoster" style="padding: 0 60px;">
        <div style="break-after: page;">
            <table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; font-size: 10px;">
                <caption>
                    <p style="font-size: 20px;">玉门油田医疗保险参保人数统计表</p>
                    <p style="font-size: 14px;line-height: 5px;">
                        <font style="display: inline-block;width: 45%;text-align: left;" >编制单位：公共事务中心医疗保险中心</font>
                        <font style="display: inline-block;width: 53%;text-align: left;">{{search_qj}}</font>
                    </p>

                </caption>
                <tbody>
                <tr>
                    <th align="center" rowspan="2">人员类型</th>
                    <th align="center" rowspan="2">期初人数</th>
                    <th align="center" colspan="4">本月增加</th>
                    <th align="center" colspan="5">本月减少</th>
                    <th align="center" rowspan="2">期末人数</th>
                </tr>
                <tr>
                    <th align="center">新参保</th>
                    <th align="center">转入</th>
                    <th align="center">其它</th>
                    <th align="center">小计</th>
                    <th align="center">死亡</th>
                    <th align="center">调出</th>
                    <th align="center">超龄</th>
                    <th align="center">其它</th>
                    <th align="center">小计</th>
                </tr>
                <tr v-for="(item,index) in list" >
                    <td align="center">{{item.rylx}}</td>
                    <td align="center">{{item.qcrs}}</td>
                    <td align="center">{{item.xcb}}</td>
                    <td align="center">{{item.zr}}</td>
                    <td align="center">{{item.qt}}</td>
                    <td align="center">{{item.xj}}</td>
                    <td align="center">{{item.sw}}</td>
                    <td align="center">{{item.dc}}</td>
                    <td align="center">{{item.cl}}</td>
                    <td align="center">{{item.jsqt}}</td>
                    <td align="center">{{item.jsxj}}</td>
                    <td align="center">{{item.qmrs}}</td>
                </tr>
                </tbody>
            </table>
            <div style="display: flex; justify-content: space-around; margin-top: 30px; font-size: 10px;">
                <div>部门负责人：</div>
                <div>审核：</div>
                <div>制表：</div>
            </div>
        </div>
    </div>
</div>

<script>


    var vm = new Vue({
        el: "#app",
        data() {
            return {
                // 表格数据
                list: [],
                formData:{month:""},
                search_qj:""
            };
        },
        created(){
            this.init();
        },
        methods: {
            async init(){
                const res = await postWebCustom(getTableId("2013"),{});
                this.formData.month = res.data;
                this.toQuery();
            },
            printHtml() {
                $("#printListRoster").print();
            },
            async statmonth(){
                if(this.formData.month == null || this.formData.month == ""){
                    top.alert("请选择日期！");
                    return;
                }
                load();
                const res = await postWebCustom(getTableId("2011"),{ny:this.formData.month});
                layer.closeAll();
                top.alert(res.msg);
            },
            async statall(){
                load();
                const res = await postWebCustom(getTableId("2011"),{ny:"all"});
                layer.closeAll();
                top.alert(res.msg);
            },
            async toQuery(){
                load();
                const res = await postWebCustom(getTableId("2012"),{ny:this.formData.month});
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                this.list = res.data;
                this.search_qj = this.formData.month.split("-")[0]+"年"+this.formData.month.split("-")[1]+"月";
            },
            // 获取表格数据
            setData(data) {
                this.list1 = data[0];
                this.list2 = data[1];
                this.title = data.title;
            },
            //   打印方法
            goPrint() {
                printJS({
                    printable: "printListRoster",
                    type: "html",
                    // 表格表头较复杂且每页要显示审核人等信息，所以不能用json数据打印
                    // properties: [
                    //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                    //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                    // ],
                    // header: `<div style="font-size:30px;text-align:center;"> 玉门油田企业员工补充医疗保险结算单 </div>`,
                    style: "@media print{@page {size:landscape}}",
                    // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    // repeatTableHeader: true,
                    scanStyles: false,
                    targetStyles: ["*"],
                    ignoreElements: ["no-print"],
                });
            },
            // 关闭窗口
            handleClose() {
                this.remoteClose();
            },
        },
    });

    function setData(data) {
        vm.setData(data);
    }
</script>
</body>
</html>